import { createStore } from 'vuex'

const store = createStore({
  state: {
    // 如果将两个列表分开管理的话是否过于麻烦?
    // undoneList: [],
    // completedList: []
    // 如果使用一个列表的话是否每次都需要进行过滤?
    list: []
  },
  mutations: {
    addItem: (state, data) => {
      state.list.push({
        id: state.list.length,
        title: data.title,
        isChecked: false
      })
    },
    delItem: (state, data) => {
      const index = state.list.findIndex(i => i.id === data.id)
      if (index !== -1) {
        state.list.splice(index, 1)
      }
    },
    changeStatus: (state, data) => {
      const index = state.list.findIndex(i => i.id === data.id)
      if (index !== -1) {
        state.list[index].isChecked = !state.list[index].isChecked
      }
    }
  },
  // getter相当于计算属性
  getters: {
    undoneList (state) {
      return state.list.filter(i => !i.isChecked)
    },
    completedList (state) {
      return state.list.filter(i => i.isChecked)
    }
  }
})

export default store
